Contentfulの画像配信をリッチに疎結合化する(Cloudinary)

Contentfulの画像配信をリッチに疎結合化する(Cloudinary)

ヘッドレスCMSのContentfulで、投稿された画像などのメディアをCloudinary経由で外部から配信してみます。
Clock Icon2020.09.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

ヘッドレスCMSのContentfulでは、投稿された画像などのメディアはContentfulの配信サーバー ctfassets.net から配信されています。

Contentfulでは画像や記事投稿などは全てレコードとして管理するのでシンプルな反面、早めに課金タイミングが来てしまったり、WEBメディアなどでは画像管理を切り離して、より厳密に行いたいなどのケースがあると思います。

今回Cloudinaryを使って画像配信をContentfulから切り離してみたいと思います。

Cloudinaryとは

メディアの管理、変換、配信をやってくれるサービスです。

Cloudianry側で画像のリサイズ、圧縮、エフェクト、果ては顔の自動切り抜きなどもやってくれる超万能なSaaSで、アプリ側で画像配信周りの実装が必要なくなるため、ヘッドレスCMSでコンテンツ管理を疎結合にする考え方にマッチするサービスだと思います。

前提

  1. Contentfulのアカウントを持っている
  2. Cloudinaryのアカウントを持っている

Contentful, Cloudinaryのいずれも無料プランでOKです。

Contentful側の準備

ContentfulがCloudinaryとの連携プラグインを提供しているのでインストールしてみます。

https://www.contentful.com/marketplace/app/cloudinary/ にアクセスして「Install」をクリックするとContentfulが開く(ログインが必要)ので、

「Space」と「Environment」で連携したいアプリを選択し、「Continue」をクリックして、次のページで「Install」をクリック。

確認ページに遷移するので、「Authorize access」をクリックします。

するとCloudinary情報を入力するページに遷移します。 Cloudname, API keyはCloudinary > Settings > Securityから確認します。

これで準備は完了です。

Contentfulでコンテンツフィールドの作成

ContentfulでCloudinaryに画像をアップロードするフィールドを作ります。

Contentfulでは記事に追加する要素は全てこの「コンテンツフィールド」で作成します。 (Wordpressをよく使っている人には、記事の全ての項目がカスタムフィールドになっているイメージです)

記事に画像を追加するための「Media」というコンテンツフィールドが既にあるのですが、Cloudinary経由でメディアをアップロードするには「JSON field」でコンテンツフィールドを作成します。

Configureする際に、「Appearance」で「Cloudinary」が選択できるはずです。

これで「SAVE」すればいよいよ準備完了です。

Contentfulで記事を作ってみる

では記事を作ってみます。

Cloudinaryへのメディアアップロードフィールドが確認できると思います。

Cloudinaryコンソールを開いてみます。

ちなみに、Cloudinaryにログインしていない場合、コンソールを開く際にログインが求められます。僕はログイン処理後にタイムアウトしてしまったのですが、Contentful側では認証済みとなっていて特に問題なかったです。

試しにCloudinaryから画像をアップしてみます。

Contentfulと連携したGatsbyアプリをブラウザで立ち上げてみます(ローカルでOK)。

成功しました!

画像も無事表示され、URLもCloudinary経由になっているのが確認できました。

最後に

Contentfulの課金は記事やメディアなど含めたレコード単位でも行われるので、Cloudinaryを併用することで、レコードボリュームを圧迫せずに済みます。無料利用できる延命措置ができる点でもメリットがあります。


クラスメソッドはCloudinaryのパートナーとして導入のお手伝いをさせていただいています。お気軽にこちらからお問い合わせください。こちらから無料でもサインアップいただけます。


参考URL

https://www.contentful.com/marketplace/app/cloudinary/

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.